﻿<div style="">

    <table style="width:100%;" cellpadding="0" cellspacing="0">

        <tr><td style="height:80px; padding:5px 0px 0px 5px;">
        
        <!-- BEGIN list -->
        <div class="thumbWrap">
            <img class="thumbItem max60" src="#{img.Thumb}" picUrl="#{img.MediumUrl}" />
        </div><!-- END list -->
        
        
        </td></tr>
        <tr><td>#{page}</td></tr>
    
    </table>
    
    <style>
    body { background:#fff;}
    .thumbWrap {float:left; margin-right:5px; width:60px; height:60px; text-align:center; cursor:pointer;}
    .currentThumb {border:1px #fed22f solid; background:#FFFFE0;}
    .max60 {max-width:60px; max-height:60px;width:expression(width>60?"60px":width+"px");height:expression(height>60?"60px":height+"px");}

    </style>

    <script>
    _run( function() {
    
        $('.thumbItem').click( function() {
            $('.thumbWrap').removeClass( 'currentThumb' );
            $(this).parent().addClass( 'currentThumb' );
            window.parent.addEditorPic( '#{editorName}', $(this).attr( 'picUrl' ) );
        });
    });
    </script>

</div>
